<div nz-row>
  <button nz-button nzType="primary" (click)="newStore()">新建店铺</button>
</div>
<div nz-row>
  <div nz-col nzSpan="24" *ngIf="listOfData && listOfData.length>0; else noData">
    <nz-table #basicTable [nzData]="listOfData">
      <thead>
      <tr>
        <th>标题</th>
        <th>简介</th>
        <th>激活</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>{{ data.title }}</td>
        <td>{{ data.description }}</td>
        <td>
          <ng-container *ngIf="data.current === true;else notActive">
            <div class="gradient-border">
              已激活
            </div>
          </ng-container>
          <ng-template #notActive>
            <div>
              <button nz-button nzType="primary"
                      nz-popconfirm
                      nzPopconfirmTitle="确定激活这个店铺吗？"
                      nzPopconfirmPlacement="bottom"
                      (nzOnConfirm)="activate(data)"
              >未激活
              </button>
            </div>
          </ng-template>
        </td>
        <td>
          <a (click)="edit(data.id)">编辑</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="delete(data.id)">删除</a>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>

  <ng-template #noData>
    <div nz-col nzSpan="24">
      <nz-empty></nz-empty>
    </div>
  </ng-template>
</div>
